<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      top="10vh"
      title="工单详情"
      width="80%"
      @close="dialogVisible = false"
      append-to-body
    >
      <div class="step">
        <div class="title">
          <h4>
            <i class="line"></i>处理进度
            <!-- <p v-if="infoData.handleUserName">处理人：{{ infoData.handleUserName }}</p> -->
          </h4>
        </div>
        <div class="box1">
          <el-steps :active="processList.length - 1" finish-status="success" align-center>
            <el-step
              v-for="(item, index) in processList"
              :key="index"
              :title="item.operateUserName + ' - ' + item.operation"
              :description="item.createTime"
            ></el-step>
          </el-steps>
        </div>
      </div>
      <div class="information">
        <div class="title">
          <h4><i class="line"></i>基本信息</h4>
        </div>
        <div class="box">
          <div class="content">
            <div class="item">
              <div class="label">工单名称:</div>
              <span class="info">{{ infoData.orderName }}</span>
            </div>
            <div class="item">
              <div class="label">工单编号:</div>
              <span class="info">{{ infoData.orderNo }}</span>
            </div>
            <div class="item">
              <div class="label">工单状态:</div>
              <span class="info">{{
                infoData.orderStatus === '0'
                  ? '未指派'
                  : '' || infoData.orderStatus === '1'
                  ? '已指派'
                  : '' || infoData.orderStatus === '2'
                  ? '处理中'
                  : '' || infoData.orderStatus === '3'
                  ? '出发中'
                  : '' || infoData.orderStatus === '4'
                  ? '挂起'
                  : '' || infoData.orderStatus === '5'
                  ? '已到达'
                  : '' || infoData.orderStatus === '6'
                  ? '已处理'
                  : '' || infoData.orderStatus === '7'
                  ? '已解决'
                  : '' || infoData.orderStatus === '8'
                  ? '已关闭'
                  : '' || infoData.orderStatus === '9'
                  ? '已取消'
                  : ''
              }}</span>
            </div>
          </div>
          <div class="content">
            <!-- <div class="item">
            <div class="label">报修人部门:</div>
            <span class="info">{{ infoData.orderUserDeptId }}</span>
          </div> -->
            <div class="item">
              <div class="label">报修人:</div>
              <span class="info">{{ infoData.orderUserName }}</span>
            </div>
            <div class="item">
              <div class="label">报修人电话:</div>
              <span class="info">{{ infoData.orderUserPhone }}</span>
            </div>
            <div class="item">
              <div class="label">报修人说明:</div>
              <span class="info">{{ infoData.applyContent }}</span>
            </div>
            <!-- <div class="item">
            <div class="label">报修人区域:</div>
            <span class="info">{{ infoData.orderNo }}</span>
          </div> -->
          </div>
          <div class="content">
            <div class="item">
              <div class="label">设备名称:</div>
              <span class="info">{{ infoData.equipName }}</span>
            </div>
            <div class="item">
              <div class="label">设备编号:</div>
              <span class="info">{{ infoData.equipNo }}</span>
            </div>
            <div class="item">
              <div class="label">预约时间:</div>
              <span class="info">{{ infoData.appointTime }}</span>
            </div>
          </div>
          <div class="content">
            <div class="item">
              <div class="label">处理人:</div>
              <span class="info">{{ infoData.handleUserName }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="information">
        <div class="title">
          <h4><i class="line"></i>处理过程</h4>
        </div>
        <div class="box2">
          <el-collapse
            v-for="(item, index) in processList"
            :key="index"
            v-model="activeNames"
            @change="handleChange"
            accordion
          >
            <el-collapse-item
              :title="[item.operation] + ' - ' + item.operateUserName + ' - ' + item.createTime"
              :name="index"
            >
              <div class="coll-item">
                <div class="coll-label">操作:</div>
                <span class="coll-info">{{ item.operation }}</span>
              </div>
              <div class="coll-item">
                <div class="coll-label">操作人:</div>
                <span class="coll-info">{{ item.operateUserName }}</span>
              </div>
              <div class="coll-item">
                <div class="coll-label">操作时间:</div>
                <span class="coll-info">{{ item.createTime }}</span>
              </div>
              <div class="coll-item" v-if="item.remark">
                <div class="coll-label">操作备注:</div>
                <span class="coll-info">{{ item.remark }}</span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import store from '/@/store/index.js'

export default {
  props: {
    // orderVisible: {
    //   type: Boolean,
    //   default: false
    // }
  },

  data() {
    return {
      dialogVisible: false,
      infoData: [],
      processList: [],
      activeNames: null
    }
  },
  watch: {
    infoData(val) {
      if (val) {
        this.processList = val.historyList
      }
    }
  },
  mounted() {},
  computed: {},

  methods: {}
}
</script>
<style scoped lang="scss">
.step {
  width: 100%;
  height: 130px;
  .title {
    width: 100%;
    i {
      display: inline-block;
      width: 5px;
      height: 16px;
      background-color: #409eff;
      margin-right: 10px;
    }
    p {
      display: inline-block;
      padding-left: 10px;
      font-weight: 400;
    }
  }
}

.information {
  width: 100%;
  // height: 230px;
  .title {
    width: 100%;
    i {
      display: inline-block;
      width: 5px;
      height: 16px;
      background-color: #409eff;
      margin-right: 10px;
    }
  }
  .box {
    width: 95%;
    padding: 30px 30px 20px;
    background-color: #f3f3f3;
    .content {
      width: 100%;
      display: flex;
      margin-bottom: 18px;
      .item {
        width: 33%;
        display: flex;

        .label {
          width: 80px;
          font-weight: 600;
          // padding-right: 10px;
        }
        .info {
          display: inline-block;
        }
      }
    }
  }
  .box2 {
    width: 95%;
    // max-height: 300px;
    padding: 0 25px;
    .coll-item {
      display: flex;
      height: 25px;
      .coll-label {
        width: 80px;
        .coll-info {
          display: inline-block;
        }
      }
    }
  }
}
// .el-form-item__label {
//   font-size: 18px !important;
// }
::v-deep .el-collapse-item__header {
  color: #409eff !important;
}
::v-deep.el-collapse-item__header.is-active {
  color: #409eff !important;
}
// ::v-deep .el-dialog {
//   // height: 100%;
//   // max-height: 100%;
// }
::v-deep .el-collapse {
  --el-collapse-header-height: 38px;
}
:deep(.el-steps--horizontal) {
  display: block;
  overflow: hidden;
  overflow-x: scroll;
}
:deep(.is-horizontal){
  width: 18%;
  flex-basis:content !important;
  max-width:inherit !important;
}
</style>
